<template>
  <el-aside class="sidebar" width="200px">
    <el-menu :default-active="$route.name" @select="handleMenuSelect">
      <!-- 动态生成菜单项 -->
      <div v-for="item in menuData" :key="item.index">
        <!-- 如果是普通菜单项（没有子菜单） -->
        <el-menu-item v-if="!item.children" :index="item.index">
          <i :class="item.icon"></i>
          <span>{{ item.label }}</span>
        </el-menu-item>

        <!-- 如果是子菜单 -->
        <el-submenu v-else :index="item.index">
          <template #title>
            <div @click="handleMenuSelect(item.index)">
              <i :class="item.icon"></i>
              <span>{{ item.label }}</span>
            </div>
          </template>
          <!-- 动态生成子菜单项 -->
          <el-menu-item
              v-for="child in item.children"
              :key="child.index"
              :index="child.index"
          >
            <span>{{ child.label }}</span>
          </el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
  </el-aside>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: "AppSidebar",
  data() {
    return {
      // 默认菜单数据
      menuData: [],
    };
  },
  computed: {
    ...mapState(['userType']),
  },
  watch: {
    userType(newVal) {
      this.updateMenuData(newVal);
    },
  },
  mounted() {
    this.updateMenuData(this.userType);
  },
  methods: {
    handleMenuSelect(index) {
      if (this.$route.name !== index) {
        this.$router.push({ name: index });
      }
    },
    updateMenuData(userType) {
      if (userType === 'user') {
        this.menuData = [
          {
            index: "Home",
            icon: "el-icon-document",
            label: "首页",
          },
          {
            index: "UserHaveTask",
            icon: "el-icon-setting",
            label: "任务管理",
            children: [
              { index: "UserHaveTask", label: "已发布任务" },
              { index: "UserAcceptTask", label: "已接受任务" },
              { index: "UserHaveNewTask", label: "发布新任务" },
            ],
          },
          {
            index: "UserInformation",
            icon: "el-icon-setting",
            label: "个人中心",
            children: [
              { index: "UserInformation", label: "个人信息" },
              { index: "UserRevampInformation", label: "资料修改" },
              { index: "UserSecuritySettings", label: "安全设置" },
            ],
          },
          {
            index: "GroupChat",
            icon: "el-icon-setting",
            label: "即时通信",
            children: [
              { index: "GroupChat", label: "群聊" },
              { index: "PrivateChat", label: "私聊" },
            ],
          },
        ];
      } else if (userType === 'admin') {
        this.menuData = [
          {
            index: "AdminInstitutionManagement",
            icon: "el-icon-user",
            label: "用户管理",
            children: [
              { index: "AdminInstitutionManagement", label: "院校管理" },
              { index: "AdminTaskManagement", label: "任务管理" },
            ],
          },
          {
            index: "AdminMaintenance",
            icon: "el-icon-s-grid",
            label: "平台管理",
            children: [
              { index: "AdminMaintenance", label: "用户维护" },
            ],
          },
          {
            index: "AdminProfile",
            icon: "el-icon-s-grid",
            label: "管理员中心",
            children: [
              { index: "AdminProfile", label: "个人信息" },
              { index: "AdminPasswordReset", label: "密码修改" },
              { index: "AdminAdd", label: "添加管理员" },
            ],
          },
          {
            index: "GroupChat",
            icon: "el-icon-s-grid",
            label: "即时通信",
            children: [
              { index: "GroupChat", label: "群聊" },
              { index: "PrivateChat", label: "私聊" },
            ],
          },
        ];
      } else {
        // 默认菜单
        this.menuData = [
          {
            index: "Home",
            icon: "el-icon-document",
            label: "首页",
          },
        ];
      }
    },
  },
};
</script>

<style scoped>
.sidebar {
  background-color: #545c64;
}

.custom-menu {
  background-color: #545c64;
  border-right: none;
}

.custom-menu .el-menu-item {
  background-color: #545c64;
  color: #fff;
}

.custom-menu .el-menu-item:hover {
  background-color: #4a535c;
  color: #fff;
}

.custom-menu .el-submenu__title {
  background-color: #545c64;
  color: #fff;
}

.custom-menu .el-submenu__title:hover {
  background-color: #4a535c;
  color: #fff;
}

.custom-menu .el-menu-item.is-active {
  background-color: #4a535c;
  color: #ffd04b;
}
</style>